import React, { useState, useEffect } from 'react'
import { Card, List, Tag, Button, Input, Select, message } from 'antd'
import { useNavigate } from 'react-router-dom'
import { FileTextOutlined, DownloadOutlined, ArrowLeftOutlined } from '@ant-design/icons'

const { Search } = Input
const { Option } = Select

const PolicyQuery: React.FC = () => {
  const navigate = useNavigate()
  const [policies, setPolicies] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [searchText, setSearchText] = useState('')
  const [category, setCategory] = useState('all')

  useEffect(() => {
    fetchPolicies()
  }, [])

  const fetchPolicies = async () => {
    setLoading(true)
    try {
      // 模拟政策数据
      const mockPolicies = [
        {
          id: '1',
          title: '2024年农业补贴政策',
          category: 'subsidy',
          publishDate: '2024-03-15',
          department: '农业农村局',
          content: '关于2024年农业补贴政策的详细说明...',
          fileSize: '2.5MB',
          downloadCount: 156
        },
        {
          id: '2',
          title: '乡村振兴战略实施方案',
          category: 'rural',
          publishDate: '2024-03-10',
          department: '乡村振兴局',
          content: '乡村振兴战略的具体实施方案和政策解读...',
          fileSize: '3.2MB',
          downloadCount: 89
        },
        {
          id: '3',
          title: '农产品质量安全管理办法',
          category: 'quality',
          publishDate: '2024-03-05',
          department: '市场监管局',
          content: '农产品质量安全管理的最新规定...',
          fileSize: '1.8MB',
          downloadCount: 67
        },
        {
          id: '4',
          title: '农业科技创新支持政策',
          category: 'tech',
          publishDate: '2024-02-28',
          department: '科技局',
          content: '支持农业科技创新的相关政策...',
          fileSize: '2.1MB',
          downloadCount: 45
        }
      ]
      setPolicies(mockPolicies)
    } catch (error) {
      message.error('获取政策数据失败')
    } finally {
      setLoading(false)
    }
  }

  const handleSearch = (value: string) => {
    setSearchText(value)
    message.info(`搜索关键词: ${value}`)
  }

  const handleDownload = (policy: any) => {
    message.success(`开始下载: ${policy.title}`)
    // 模拟下载
    setTimeout(() => {
      message.success(`${policy.title} 下载完成`)
    }, 2000)
  }

  const getCategoryName = (category: string) => {
    const categoryMap = {
      subsidy: '补贴政策',
      rural: '乡村振兴',
      quality: '质量安全',
      tech: '科技创新',
      all: '全部'
    }
    return categoryMap[category as keyof typeof categoryMap] || '其他'
  }

  const filteredPolicies = policies.filter(policy => {
    const matchesSearch = policy.title.toLowerCase().includes(searchText.toLowerCase()) ||
                         policy.content.toLowerCase().includes(searchText.toLowerCase())
    const matchesCategory = category === 'all' || policy.category === category
    return matchesSearch && matchesCategory
  })

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <Card 
        title={
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <Button 
              type="text" 
              icon={<ArrowLeftOutlined />} 
              onClick={() => navigate('/user-dashboard')}
              style={{ padding: '4px 8px' }}
            >
              返回
            </Button>
            <span>政策查询</span>
          </div>
        }
        style={{ marginBottom: '24px' }}
        extra={
          <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
            <Select 
              value={category} 
              onChange={setCategory}
              style={{ width: 120 }}
            >
              <Option value="all">全部</Option>
              <Option value="subsidy">补贴政策</Option>
              <Option value="rural">乡村振兴</Option>
              <Option value="quality">质量安全</Option>
              <Option value="tech">科技创新</Option>
            </Select>
            <Search 
              placeholder="搜索政策标题或内容" 
              onSearch={handleSearch}
              style={{ width: 300 }}
            />
          </div>
        }
      >
        <List
          loading={loading}
          dataSource={filteredPolicies}
          renderItem={policy => (
            <List.Item
              style={{ padding: '20px 0', borderBottom: '1px solid #f0f0f0' }}
              actions={[
                <Button 
                  type="primary" 
                  icon={<DownloadOutlined />}
                  onClick={() => handleDownload(policy)}
                >
                  下载
                </Button>
              ]}
            >
              <List.Item.Meta
                avatar={<FileTextOutlined style={{ fontSize: '32px', color: '#1890ff' }} />}
                title={
                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                    <span style={{ fontSize: '18px', fontWeight: 600 }}>{policy.title}</span>
                    <Tag color="blue">{getCategoryName(policy.category)}</Tag>
                  </div>
                }
                description={
                  <div>
                    <p style={{ margin: '8px 0', color: '#666' }}>{policy.content}</p>
                    <div style={{ display: 'flex', gap: '24px', fontSize: '14px', color: '#999' }}>
                      <span>发布部门：{policy.department}</span>
                      <span>发布时间：{policy.publishDate}</span>
                      <span>文件大小：{policy.fileSize}</span>
                      <span>下载次数：{policy.downloadCount}</span>
                    </div>
                  </div>
                }
              />
            </List.Item>
          )}
        />
      </Card>
    </div>
  )
}

export default PolicyQuery